<template>
	<scroll-view class="main">
		<view class="maskClass" v-show="showMask">
			<view v-show="showMask" style="width: 80%; background-color: #fff; padding: 15px; border-radius: 15rpx; margin: 30% auto; z-index: 1">
				<view style="width: 100%; height: fit-content">
					<view style="text-align: center">
						<!-- <text style="color: darkgray;margin-top:25rpx;margin-bottom: 25rpx;">{{rencaiDetail.graduateInstitutions}}</text> -->
						<view class="service-info">
							<text>{{ rencaiDetail.synopsis }}</text>
						</view>
					</view>
				</view>
				<view style="width: 100%; text-align: center">
					<view style="padding: 15rpx; margin: 15rpx auto; font-size: 35rpx; font-weight: 700; text-align: center">
						<text>请完善咨询信息</text>
					</view>
					<view class="devideline"></view>
					<!-- <view class="login_from_input">
						<view class="form-left">预约时间</view>
						<view class="login_from_fun">
							<picker style="width: 100%" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view style="font-size: 32rpx; float: left">{{ date || '请选择预约时间' }}</view>
							</picker>
						</view>
					</view> -->
					<!-- <view class="login_from_input">
						<view class="form-left">联系电话</view>
						<view class="login_from_fun"><input type="number" maxlength="11" v-model="askInfo.userPhone" placeholder="请输入联系电话" /></view>
					</view> -->
					<view class="login_from_input">
						<view class="form-left">咨询内容</view>
						<view class="login_from_fun">
							<textarea style="height: 100rpx; text-align: left" type="number" v-model="askInfo.detail" placeholder="请输入咨询内容"></textarea>
						</view>
					</view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitAsk()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
			</view>
		</view>
		<view style="position: relative">
			<view class="top" v-if="type === '2'">
				<image class="rencai_photo" :src="rencaiDetail.image ? imgUrl + rencaiDetail.image : defaultImage"></image>
				<view class="info">
					<view>
						<text>队伍名称：{{ rencaiDetail.teamname || '' }}</text>
					</view>
					<view>
						<text>牵头单位：{{ rencaiDetail.leadunit || '' }}</text>
					</view>
					<view>
						<text>首席科学家：{{ rencaiDetail.chiefscientist || '' }}</text>
					</view>
					<view>
						<text>首席工程师：{{ rencaiDetail.scientistPhone || '' }}</text>
					</view>
				</view>
			</view>
			<view class="top" v-else-if="type === '9'">
				<image class="rencai_photo" :src="rencaiDetail.touxiang ? imgUrl + rencaiDetail.touxiang : defaultImage"></image>
				<view class="info">
					<view>
						<text>姓名：{{ rencaiDetail.name || '' }}</text>
					</view>
					<view>
						<text>性别：{{ rencaiDetail.gender ? formatterGender(rencaiDetail.gender) : '' }}</text>
					</view>
					<view>
						<text>学历：{{ rencaiDetail.education || '' }}</text>
					</view>
					<view>
						<text>籍贯：{{ rencaiDetail.hometown || '' }}</text>
					</view>
					<view>
						<text>专业专长：{{ rencaiDetail.specialized || '' }}</text>
					</view>
					<view>
						<text>推荐单位：{{ rencaiDetail.tjdept || '' }}</text>
					</view>
					<view>
						<text>工作单位：{{ rencaiDetail.dept || '' }}</text>
					</view>
					<view>
						<text>毕业院校：{{ rencaiDetail.graduateInstitutions || '' }}</text>
					</view>
					<view>
						<text>专业技术职务：{{ rencaiDetail.technicaltitles || '' }}</text>
					</view>
				</view>
			</view>
			<view class="top" v-else-if="type === '12'">
				<image class="rencai_photo" :src="rencaiDetail.image ? imgUrl + rencaiDetail.image : defaultImage"></image>
				<view class="info">
					<view>
						<text>队伍名称：{{ rencaiDetail.name || '' }}</text>
					</view>
					<view>
						<text>申报单位：{{ rencaiDetail.sbdw || '' }}</text>
					</view>
					<view>
						<text>产业领域：{{ rencaiDetail.cyly ? formatIndustrialSector(personInfo.cyly) : '' }}</text>
					</view>
					<view>
						<text>单位详细地址：{{ rencaiDetail.address || '' }}</text>
					</view>
					<view>
						<text>团队人数：{{ rencaiDetail.zrs || '' }}</text>
					</view>
				</view>
			</view>
			<view class="top" v-else-if="type === '13'">
				<image class="rencai_photo" :src="rencaiDetail.image ? imgUrl + rencaiDetail.image : defaultImage"></image>
				<view class="info">
					<view>
						<text>姓名：{{ rencaiDetail.grxm || '' }}</text>
					</view>
					<view>
						<text>性别：{{ rencaiDetail.xb ? formatterGender(rencaiDetail.xb) : '' }}</text>
					</view>
					<view>
						<text>专业：{{ rencaiDetail.zy ? formatZY(personInfo.zy) : '' }}</text>
					</view>
					<view>
						<text>毕业院校：{{ rencaiDetail.byyx || '' }}</text>
					</view>
					<view>
						<text>单位名称：{{ rencaiDetail.dwmc || '' }}</text>
					</view>
				</view>
			</view>
			<view class="top" v-else-if="type === '14'">
				<image class="rencai_photo" :src="rencaiDetail.image ? imgUrl + rencaiDetail.image : defaultImage"></image>
				<view class="info">
					<view>
						<text>姓名：{{ rencaiDetail.name || '' }}</text>
					</view>
					<view>
						<text>性别：{{ rencaiDetail.sex ? formatterGender(rencaiDetail.sex) : '' }}</text>
					</view>
					<view>
						<text>学历：{{ rencaiDetail.education || '' }}</text>
					</view>
					<view>
						<text>所学专业：{{ rencaiDetail.major || '' }}</text>
					</view>
					<view>
						<text>毕业院校：{{ rencaiDetail.school || '' }}</text>
					</view>
					<view>
						<text>从事专业：{{ rencaiDetail.cszy || '' }}</text>
					</view>
					<view>
						<text>工作单位：{{ rencaiDetail.company || '' }}</text>
					</view>
					<view>
						<text>职务/职称：{{ rencaiDetail.position || '' }}</text>
					</view>
					<view>
						<text>专家类型：{{ rencaiDetail.type ? formatType(rencaiDetail.type) : '' }}</text>
					</view>
				</view>
			</view>
			<view class="top" v-else>
				<image class="rencai_photo" :src="rencaiDetail.image ? imgUrl + rencaiDetail.image : defaultImage"></image>
				<view class="info">
					<view>
						<text>姓名：{{ rencaiDetail.name || '' }}</text>
					</view>
					<view>
						<text>性别：{{ rencaiDetail.gender ? formatterGender(rencaiDetail.gender) : '' }}</text>
					</view>
					<view>
						<text>国籍：{{ rencaiDetail.nationality ? formatNationality(rencaiDetail.nationality) : '' }}</text>
					</view>
					<view>
						<text>邮编：{{ rencaiDetail.postcode || '' }}</text>
					</view>
					<view>
						<text>民族：{{ rencaiDetail.ethnicGroup ? formatEthnicGroup(rencaiDetail.ethnicGroup) : '' }}</text>
					</view>
					<view>
						<text>学历：{{ rencaiDetail.education ? formatEducation(rencaiDetail.education) : '' }}</text>
					</view>
					<view>
						<text>毕业院校：{{ rencaiDetail.graduateInstitutions || '' }}</text>
					</view>
					<view>
						<text>行业领域：{{ rencaiDetail.field ? formatField(rencaiDetail.field) : '' }}</text>
					</view>
					<view>
						<text>人才类型：{{ rencaiDetail.talentType ? formatTalentType(rencaiDetail.talentType) : '' }}</text>
					</view>
					<view>
						<text>研究方向：{{ rencaiDetail.researchDirection ? formatResearchDirection(rencaiDetail.researchDirection) : '' }}</text>
					</view>
					<view>
						<text>技术职务：{{ rencaiDetail.professionalTitle ? formatProfessionalTitle(rencaiDetail.professionalTitle) : '' }}</text>
					</view>
				</view>
			</view>
			<u-button v-if="type==='9'||type==='13'||type==='14'" size="mini" type="primary" :customStyle="{ width: '50rpx', position: 'absolute', right: '56rpx', bottom: '8rpx' }" @click="orderBtn">咨询</u-button>
		</view>

		<view style="height: 15rpx; background-color: #fff"></view>
		<scroll-view class="bottom" v-if="type === '2'">
			<view>
				<text>研究方向：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.yjfx || '' }}</text>
			</view>
			<view>
				<text>应用方向：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.yyfx || '' }}</text>
			</view>
		</scroll-view>
		<scroll-view class="bottom" v-else-if="type === '12'">
			<view>
				<text>团队简介：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.tdjj || '' }}</text>
			</view>
		</scroll-view>
		<scroll-view class="bottom" v-else-if="type === '13'">
			<view>
				<text>个人简介：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.grjj || '' }}</text>
			</view>
		</scroll-view>
		<scroll-view class="bottom" v-else-if="type === '14'">
			<view>
				<text>自我介绍：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.introdution || '' }}</text>
			</view>
		</scroll-view>
		<view v-else-if="type === '9'"></view>
		<scroll-view class="bottom" v-else>
			<view>
				<text>个人简介：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.synopsis || '' }}</text>
			</view>
			<view>
				<text>主要工作经历：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.workExperience || '' }}</text>
			</view>
			<view>
				<text>主要工作成绩：</text>
			</view>
			<view style="margin-top: 20rpx">
				<text>{{ rencaiDetail.workingPerformance || '' }}</text>
			</view>
		</scroll-view>
	</scroll-view>
</template>

<script>
import env from '@/utils/env.js';
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
import { useStore } from 'vuex';
import * as techPerson from '@/api/source/kjrc/TECH_PERSON.js';
import * as techManager from '@/api/source/kjrc/KJJJR.js';
import * as newTeam from '@/api/source/kjrc/XSCDW.js';
import * as newYounger from '@/api/source/kjrc/QNXXTJB.js';
import * as enginner from '@/api/source/kjrc/ENGINNER.js';
import * as dict from '@/api/system/dict/data.js';
import * as industry from '@/api/system/industry.js';
import * as subject from '@/api/system/subject.js';
import * as ask from '@/api/ask/ask.js';

function getDate(type) {
	const date = new Date();

	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}

import { defineComponent } from 'vue';
export default {
	data() {
		return {
			title: '',
			rencaiDetail: {},
			content: '',
			educationList: [{ value: '', dictLabel: '' }],
			memberType: 'top',
			askInfo: {
				detail: ''
			},
			showMask: false,
			//截止时间选择相关
			date: '',
			startDate: getDate('start'),
			endDate: getDate('end'),
			canlendarShow: false,
			type: '',
			sexList: [],
			imgUrl: '',
			defaultImage: require('@/static/images/default_avatar.png'),
			industrialSectorList: [],
			majorList: [],
			typeList: [],
			nationalList: [],
			ethnicList: [],
			fieldList: [],
			talentTypeList: [],
			researchDirectionList: [],
			professionalTitleList: []
		};
	},
	onLoad(option) {
		this.getDicts();
		this.getRencaiDetail(option.id, option.type);
		this.type = option.type;
		this.imgUrl = env.imgUrl;
	},
	methods: {
		bindDateChange(value) {
			console.log(value);
		},
		orderBtn() {
			this.getUser();
			this.showMask = true;
		},
		formatProfessionalTitle(value) {
			return this.professionalTitleList.find((item) => item.dictValue === value).dictLabel;
		},
		formatResearchDirection(value) {
			return this.researchDirectionList.find((item) => item.dictValue === value).dictLabel;
		},
		formatTalentType(value) {
			return this.talentTypeList.find((item) => item.dictValue === value).dictLabel;
		},
		formatField(value) {
			return this.fieldList.find((item) => item.dictValue === value).dictLabel;
		},
		formatEducation(value) {
			return this.educationList.find((item) => item.dictValue === value).dictLabel;
		},
		formatEthnicGroup(value) {
			return this.ethnicList.find((item) => item.dictValue === value).dictLabel;
		},
		formatNationality(nationality) {
			return this.nationalList.find((item) => item.dictValue === nationality).dictLabel;
		},
		formatType(type) {
			if (this.typeList.find((item) => item.dictValue === type)) {
				return this.typeList.find((item) => item.dictValue === type).dictLabel;
			} else {
				return '';
			}
		},
		formatZY(subId) {
			return this.majorList.find((item) => item.subId === subId).subName;
		},
		formatIndustrialSector(id) {
			return this.industrialSectorList.find((item) => item.industryId == id)?.name;
		},
		formatterGender(gender) {
			if (this.sexList.find((item) => item.dictValue === gender)) {
				return this.sexList.find((item) => item.dictValue === gender).dictLabel;
			} else {
				return '';
			}
		},
		getUser() {
			var value = uni.getStorageSync('userInfo') || [];
			if (value.login_user == null) {
				uni.showToast({
					icon: 'none',
					title: '请先登录！'
				});
				uni.navigateTo({
					url: '/subpages/pages/register/login_province'
				});
				this.showMask = false;
			}
		},
		getDicts() {
			dict.getDicts('person_education').then((res) => {
				this.educationList = res.data;
			});
			dict.getDicts('sys_user_sex').then((res) => {
				this.sexList = res.data;
			});
			industry.findbyparentid(0).then((res) => {
				this.industrialSectorList = res.data;
			});
			subject.findbysubpid(0).then((res) => {
				this.majorList = res.data;
			});
			dict.getDicts('person_zjtype').then((res) => {
				this.typeList = res.data;
			});
			dict.getDicts('person_nationality').then((response) => {
				this.nationalList = response.data;
			});
			dict.getDicts('person_ethnic_group').then((response) => {
				this.ethnicList = response.data;
			});
			dict.getDicts('person_field').then((response) => {
				this.fieldList = response.data;
			});
			dict.getDicts('person_talent_type').then((response) => {
				this.talentTypeList = response.data;
			});
			dict.getDicts('person_research_direction').then((response) => {
				this.researchDirectionList = response.data;
			});
			dict.getDicts('person_professional_title').then((response) => {
				this.professionalTitleList = response.data;
			});
		},
		toggle1(type) {
			// this.type = type;
			// this.$refs['memberPopup'].open();
			this.showMask = true;
			this.getUser();
		},
		closePopup() {
			this.showMask = false;
		},
		getRencaiDetail(id, personType) {
			techPerson.getDetailXiangqing({ id, personType }).then((res) => {
				this.rencaiDetail = res.data;
				console.log(res.data);
			});
		},
		submitAsk() {
			if (this.askInfo.detail == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入咨询内容！'
				});
			} else {
				const queryData = {
					type: this.type,
					recipientId: this.rencaiDetail.memberId,
					relationId: this.rencaiDetail.id,
					laboratoryname: this.rencaiDetail.name,
					content: this.askInfo.detail,
					recipientName: this.rencaiDetail.name,
					recipientTel: this.rencaiDetail.phone
				};
				console.log(queryData);
				ask.SubmitInfo(queryData).then((res) => {
					if (res.code == 200) {
						this.showMask = false
					}
				});
			}
		},
		changeDate(e) {
			this.canlendarShow = false;
			var year = e.year;
			var month = e.month;
			if (month < 10) {
				month = '0' + month;
			}
			var day = e.day;
			if (day < 10) {
				day = '0' + month;
			}

			this.askInfo.date = year + '-' + month + '-' + day;
		}
	}
};
</script>

<style>
.main {
	padding: 25rpx 25rpx;
	background-color: #fff;
}

.rencai_photo {
	width: 38%;
	height: 300rpx;
	float: left;
	margin-top: 15rpx;
}

.info {
	flex: 1;
	hieght: 330rpx;
	float: right;
	margin-top: 15rpx;
}

.top {
	min-height: 330rpx;
	width: 89%;
	margin-right: 25rpx;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 15rpx;
	border: #016fb8 solid 1rpx;
	display: flex;
}

.info text {
	line-height: 60rpx;
}

.bottom {
	height: fit-content;
	width: 89%;
	line-height: 50rpx;
	margin-top: 45rpx;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 15rpx;
	border: #016fb8 solid 1rpx;
}

.uni-form-item {
	margin: 60rpx 30rpx;
	border-radius: 50px;
}

.uni-form-item button {
	background-color: #016fb8;
	height: 70rpx;
	font-size: 28rpx;
	margin-top: 20rpx;
}

.login_from_input {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px #eee solid;
	padding: 20upx 0px;
	margin: 0px auto;
	background-color: #fff;
}

.login_from_name {
	width: 30%;
	margin-left: 40rpx;
	font-size: 30rpx;
}
.login_from_fun {
	width: 70%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	text-align: right;
	margin-left: 25rpx;
}

.login_from_fun input {
	width: 100%;
	text-align: left;
	font-size: 14px;
}

/deep/ .uni-popup .uni-popup__wrapper {
	width: 70% !important;
	margin: 0 auto;
}

.service-range {
	height: 350rpx;
	margin-top: 15rpx;
	background-color: #fff;
	padding: 25rpx;
	text-align: center;
}

.devideline {
	float: left;
	height: 0.3rpx;
	width: 100%;
	background-color: #eeeeee;
	margin-top: 15rpx;
	margin-bottom: 15rpx;
}

.maskClass {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
}

.submit_view {
	height: 90rpx;
}

.submit_view .submit {
	background-color: #016fb8;
	height: 70rpx;
	width: 40%;
	font-size: 28rpx;
	margin-top: 20rpx;
	float: left;
}
.submit_view .canncle {
	background-color: darkgray;
	height: 70rpx;
	width: 40%;
	font-size: 28rpx;
	margin-top: 20rpx;
	float: right;
}
</style>
